<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.分析几个问题</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 
			总结：
					1.Vue实例和容器是一一对应的，真实开发中只有一个Vue实例，而且还会配合组件一起使用；
					2.data中的数据，只要发生改变，模板中用到该数据的地方就会自动更新（局部更新）；
					3.{{xxx}}中的xxx要写js表达式，且xxx可以直接看到data中配置的属性；

			注意区分【js表达式】与【js语句（代码）】
					1.表达式：会产生一个值，可以放在任何一个需要值的地方
							(1). 100
							(2). a
							(3). demo()
							(4). x === y ? 1 : 0
							(5). 200 - 2
							(6). arr.map()
					2.语句（代码）: 不会产生值，只是控制代码走向
							(1). if(){}
							(2). for(){}
							(3). try{} catch(err){}
							等等.....
	-->
	<!-- 准备好一个容器 -->
	<div id="demo">
		<h1>学校名：{{name}}</h1>
		<h1>学校名（大写）：{{name.toUpperCase()}}</h1>
		<h1>学校名（大写,截取前2位）：{{name.toUpperCase().slice(0,2)}}</h1>
		<h1>学校年龄：{{age}}</h1>
		<h1>学校年龄（大一岁）：{{age+1}}</h1>
		<h1>{{ age >= 18 ? '成年' : '未成年' }}</h1>
	</div>

	<script type="text/javascript" >
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
		//创建一个Vue实例
		new Vue({
			el:'#demo',
			data:{
				name:'atguigu',
				age:8
			}
		})
	</script>
</body>
</html>